<template>

	<div>
		<el-dialog :title="title" :visible.sync="dialogVisible" width="1200px" :before-close="handleClose"
			:close-on-click-modal="false">
			<el-form :inline="false" :model="formInline" ref="edd-add-form" :rules="formRules" class="demo-form-inline"
				v-loading="loadingForm" label-width="140px">


				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="商品名称:" prop="goodsName">
							<el-input v-model="formInline.goodsName" placeholder="请输入100字内商品名称"  maxlength="100" show-word-limit></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="商品图片:" prop="goodsPicAddress">
							<ImageUpload v-model="formInline.goodsPicAddress" :showFileList="false" :limit="5"
								:width="750" :height="750" :fileSize="10"></ImageUpload>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="商品视频:" prop="goodsVideoAddress">
							<div class="up-file-wrappar">
								<div v-if="formInline.goodsVideoAddress">
									<video :src="baseUrl + formInline.goodsVideoAddress" width="200px" height="140px"
										controls></video>
								</div>
								<div>
									<el-upload class="upload-demo" :headers="{
										Authorization: getToken
									}" :action="uploadIurl" :on-change="handleUpFileChange" :limi="1" :show-file-list="false" name="file"
										:multiple="false" accept="video/*">
										<el-button icon="el-icon-upload2" size="mini" style="margin-left: 6px;"
											type="primary" circle></el-button>
									</el-upload>
								</div>
							</div>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="商品类目:" prop="goodsCategoryId">
							<div style="width: 217px;">
								<treeselect v-model="formInline.goodsCategoryId" :options="menuOptions"
									:normalizer="normalizer" :show-count="true" placeholder="请选择商品类目"
									@select="handleSelect" />
							</div>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="商品参数:" prop="wcGoodsParameterDtos">
							<el-button type="" icon="el-icon-plus" @click="handleAddParameter">添加商品参数</el-button>
							<div>
								<div style="margin-top:12px;" v-for="(_item,_index) in formInline.wcGoodsParameterDtos"
									:key="_index">
									<el-select v-model="_item.goodsParameterId" placeholder="请选择参数名称" size="mini"
										@change="handleParameterOnce(_index)">
										<!-- goodsParameterId -->
										<el-option :label="item.goodsParameterName" :value="item.goodsParameterId"
											v-for="(item,index) in parameterData" :key="'1-'+index" />
									</el-select>
									<el-select v-model="_item.parameter" placeholder="请选择参数值" size="mini"
										style="margin-left: 10px;">
										<el-option :label="item" :value="item" v-for="(item,index) in _item.listData"
											:key="'2-'+index" />
									</el-select>
									<!-- 删除 -->
									<el-button type="danger" icon="el-icon-delete" @click="handleParameterDel(_index)"
										circle size="mini" style="margin-left: 8px;" />
								</div>
							</div>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="商品分类:" prop="goodsTypeId">
							<div style="width: 217px;">
								<treeselect v-model="formInline.goodsTypeId" :options="menuOptionsType"
									:normalizer="normalizerType" :show-count="true" placeholder="请选择商品分类" />
							</div>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="商品规格信息:" prop="shopingRouleInfo">
							<el-button type="" icon="el-icon-plus" @click="handleAddRuleInfo">添加商品规格信息</el-button>
							<div style="margin-top:12px;">
								<div>
									<div v-for="(item,index) in shopingRouleInfo" :key="index">
										<div>
											<span>规格名</span>
											<el-input v-model="item.name" size="mini"
												style="width: 150px;margin: 0 8px;" placeholder="请输入"
												@blur="handleBlurRuleInfo" />
											<div class="" style="display: inline-block;margin-right: 8px;" title="上传图片">
												<el-upload class="upload-demo" :headers="{
													Authorization: getToken
												}" :action="uploadIurl" :on-change="e=>upImageRule(e,index)" :limi="1" :show-file-list="false" name="file"
													:multiple="false" accept="image/*">
													<el-image style="width: 50px; height: 50px" :src="baseUrl+item.pic"
														v-if="item.pic" fit="cover"></el-image>
													<el-button icon="el-icon-upload2" size="mini" v-else
														style="margin-left: 6px;" type="primary" circle></el-button>
												</el-upload>
											</div>
											<!-- 删除 -->
											<el-button type="danger" icon="el-icon-delete" @click="handleRuleDel(index)"
												circle size="mini" />
										</div>
										<div style="margin-top: 12px;">
											<span>规格值</span>
											<el-input v-model="i.name" size="mini" style="width: 169px;"
												placeholder="请输入" v-for="(i,_index) in item.arr" :key="_index"
												@blur="handleBlurRuleArr">
												<el-button type="danger" icon="el-icon-delete"
													@click="handleRuleArrDel(index,_index)" slot="append" />
											</el-input>
											<el-button type="" icon="el-icon-plus" size="mini" style="margin-left: 8px;"
												@click="handleAddRuleArr(index)">添加规格值</el-button>
										</div>
									</div>
								</div>
							</div>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="规格明细:" prop="tableData">
							<el-table :data="tableData" style="width: 100%;" :span-method="objectSpanMethod">
								<el-table-column width="80" prop="pic" label="图片" align="center"
									v-if="shopingRouleInfo[0] && shopingRouleInfo[0].pic">
									<template slot-scope="row">
										<el-image style="width: 50px; height: 50px"
											:src="baseUrl + shopingRouleInfo[0].pic" fit="cover"></el-image>
									</template>
								</el-table-column>
								<el-table-column width="80" prop="title1Val"
									v-if="shopingRouleInfo[0] && shopingRouleInfo[0].name">
									<template slot="header">
										{{shopingRouleInfo[0].name}}
									</template>
								</el-table-column>
								<el-table-column width="80" prop="title2Val"
									v-if="shopingRouleInfo[1] && shopingRouleInfo[1].name">
									<template slot="header">
										{{shopingRouleInfo[1].name}}
									</template>
								</el-table-column>
								<el-table-column label="价格（元）" width="180">
									<template slot-scope="scope">
										<el-input-number v-model="scope.row.mealCardPay" :controls="false" size="mini"
											:precision="2" :step="0.1" :min="0.01" :max="99999999"></el-input-number>
									</template>
								</el-table-column>
								<el-table-column label="库存">
									<template slot-scope="scope">
										<el-input-number v-model="scope.row.recommendation" :controls="false"
											size="mini" :min="1" :max="99999999" style="width: 100px;">
										</el-input-number>
									</template>
								</el-table-column>
								<el-table-column label="规格编码">
									<template slot-scope="scope">
										<el-input v-model="scope.row.platformSpecificationCode" size="mini"
											placeholder="请输入" style="text-align: center;"></el-input>
									</template>
								</el-table-column>

								<el-table-column label="货品编码">
									<template slot-scope="scope">
										<el-input v-model="scope.row.platformItemCode" size="mini" placeholder="请输入"
											style="text-align: center;"></el-input>
									</template>
								</el-table-column>
								<el-table-column label="重量(kg)">
									<template slot-scope="scope">
										<el-input v-model="scope.row.productDescription" size="mini" placeholder="请输入"
											style="text-align: center;"></el-input>
									</template>
								</el-table-column>
								<el-table-column label="体积(m3)">
									<template slot-scope="scope">
										<el-input v-model="scope.row.goodsAttribute" size="mini" placeholder="请输入"
											style="text-align: center;"></el-input>
									</template>
								</el-table-column>
							</el-table>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="商品详情:" prop="detailAddress">
							<ImageUpload v-model="formInline.detailAddress" :limit="99" :isShowTip="false">
							</ImageUpload>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="供应商:" prop="supplier">
							<el-input v-model="formInline.supplier" class="cell-input" placeholder="请输入商品供应商" />
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="合作方式:" prop="cooperationMethods">
							<el-radio-group v-model="formInline.cooperationMethods">
								<el-radio label="采购">采购</el-radio>
								<el-radio label="代销">代销</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="上下架状态:" prop="productIntroduction">
							<el-radio-group v-model="formInline.productIntroduction">
								<el-radio label="1">上架</el-radio>
								<el-radio label="0">下架</el-radio>
							</el-radio-group>
							<div style="margin-top: 12px;">
								<el-checkbox v-model="formInline.showlastOnshowTime" style="margin-right: 20px;"
									@change="formInline.lastOnshowTime = ''">启动定时下架
								</el-checkbox>
								<el-date-picker v-model="formInline.lastOnshowTime"
									:disabled="!formInline.showlastOnshowTime" size="mini" type="datetime"
									placeholder="选择定时下架时间" />
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				<!-- 先不上 -->
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="配送方式:" prop="deliveryMethod">
							  <el-radio-group v-model="formInline.deliveryMethod">
							    <el-radio label="1">菜鸟仓配送</el-radio>
							    <el-radio label="2">小程序线下配送</el-radio>
							    <!-- <el-radio label="3">到店自提</el-radio> -->
							  </el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleSubmit" :loading="btnLoading">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getToken
	} from "@/utils/auth";
	import {
		listWcGoodsCategory
	} from "@/api/culturalCreativity/category.js";
	import {
		listWcGoodsParameter,
	} from "@/api/culturalCreativity/parameter.js";
	import Treeselect from "@riophae/vue-treeselect";
	import "@riophae/vue-treeselect/dist/vue-treeselect.css";
	let _this;
	import {
		addWcGoods,
		updataWcGoods,
		findWcGoods
	} from "@/api/culturalCreativity/shopping.js";
	export default {
		name: "ShoppingAdd",
		components: {
			Treeselect
		},
		props: {
			classificationData: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				title: '',
				id: null,
				getToken: getToken(),
				dialogVisible: false,
				baseUrl: process.env.VUE_APP_BASE_API,
				formRules: {
					wcGoodsParameterDtos: {
						required: true,
						validator: (rule, value, callback) => {
							for (let i = 0; i < value.length; i++) {
								if (!value[i].parameter || !value[i].goodsParameterId) {
									return callback(new Error("请选择"))
								}
							}
							if (!value.length) {
								return callback(new Error("请添加商品参数"))
							}
							return callback();
						},
						trigger: 'change'
					},
					shopingRouleInfo:{
						required: true,
						validator: (rule, value, callback) => {
							if(!Array.isArray(this.shopingRouleInfo)) return callback();
							for(let i=0;i<this.shopingRouleInfo.length;i++){
									if(!this.shopingRouleInfo[i].name) return callback(new Error("请输入规格名"));
									if(this.shopingRouleInfo[i].arr.some(i=> i.name =="")) return callback(new Error("请输入规格值"));	
							}
							return callback();
						},
						trigger: 'blur'
					},
					tableData:{
						required: true,
						validator: (rule, value, callback) => {
							if(!this.tableData.length) return callback(new Error("请添加规格明细"));
							for(let i=0;i<this.tableData.length;i++){
								let arr = Object.keys(this.tableData[i]);
								for(let o=0;o<arr.length;o++){	
									if(!this.tableData[i][arr[o]]) return callback(new Error(" "));
								}
							}
							return callback();
						},
						trigger: 'blur'
					},
					goodsName: {
						required: true,
						message: '请输入商品名称',
						trigger: 'blur'
					},
					goodsCategoryId: {
						required: true,
						message: "请选择商品类目",
						trigger: 'change'
					},
					goodsTypeId: {
						required: true,
						message:"请选择商品分类",
						trigger: 'change'
					},
					productIntroduction: {
						required: true,
						message: '请选择上下架状态',
						trigger: 'change'
					},
					goodsPicAddress: {
						required: true,
						message: '请上传商品图片',
						trigger: 'change'
					},
					deliveryMethod: {
						required: true,
						message: '请选择配送方式',
						trigger: 'change'
					},
					showDeliveryType: {
						required: true,
						message: '请选择快递方式',
						trigger: 'change'
					},
					cooperationMethods: {
						required: true,
						message: '请选择合作方式',
						trigger: 'change'
					},
				},
				shopingRouleInfo: [],
				tableData: [],
				formInline: {},
				loadingScreen: null,
				loadingForm: false,
				fileName: '',
				btnLoading: false,
				menuOptions: [],
				menuOptionsType: [],
				parameterData: [],
				listCategoryData: []
			}
		},
		methods: {
			async init(id) {
				try {
					_this = this;
					this.title = '';
					this.resetFrom();
					this.dialogVisible = true;
					await this.getLeiMu();
					await this.getLeiMuType();
					await this.getParameterList();
					if (this.$refs['edd-add-form']) this.$refs['edd-add-form'].resetFields();
					if (!id) return this.title = '新增';
					this.title = '修改'
					this.loadingForm = true;
					let res2 = await findWcGoods(id);
					this.loadingForm = false;
					this.formInline.goodsId = id;
					Object.keys(this.formInline).forEach(item => {
						if (res2.data[item]) {
							this.formInline[item] = res2.data[item];
						}
					});
					// 回显
					this.formInline.goodsTypeId = res2.data.wcGoodsTypeContactList[0].goodsTypeId; //商品分类回显
					this.formInline.goodsCategoryId = res2.data.goodsCategory;
					this.formInline.showlastOnshowTime = this.formInline.lastOnshowTime ? true : false;
					// this.formInline.goodsTypeId = res2.data.wcGoodsTypeContactList.map(item => item.goodsTypeId);
					this.formInline.showDeliveryType = this.formInline.postageRate ? true : false;
					this.formInline.wcGoodsParameterDtos = res2.data.wcGoodsParameterList.map(item => {
						return {
							goodsParameterId: item.goodsParameterId,
							parameter: item.parameter
						}
					});
					this.shopingRouleInfo = res2.data.wcGoodsSpecificationNameList.map(item => {
						return {
							name: item.specificationName,
							pic: item.specificationPic,
							arr: item.specificationValue.split(",").filter(item => item).map(name => {
								return {
									name
								}
							})
						}
					});
					this.saveTable(res2.data.wcGoodsSpecificationList);
				} catch (e) {
					console.log('错误信息：', e)
					this.loadingForm = false;
				}
			},
			handleSelect(e) {
				this.formInline.wcGoodsParameterDtos = this.formInline.wcGoodsParameterDtos.map(item => {
					return {
						goodsParameterId: "",
						parameter: ""
					}
				});
				this.getParameterList();
			},
			async getParameterList() {
				let res1 = await listWcGoodsParameter({}, {
					pageNum: 1,
					pageSize: 9999,
					goodsCategoryId: this.formInline.goodsCategoryId,
					goodsCategoryName: this.listCategoryData.reduce((pev, item) => {
						if (Number(item.goodsCategoryId) == Number(this.formInline.goodsCategoryId)) {
							pev = item.goodsCategoryName
						}
						return pev;
					}, ""),
				});
				this.parameterData = res1.rows.map(item => {
					item.parameterList = item.parameter.split(",");
					return item;
				});
				return;
			},
			upImageRule(e, index) {
				if (e.response) {
					this.shopingRouleInfo[index].pic = e.response.fileName;

					console.log('上传的图片：', this.shopingRouleInfo)
				}
			},
			handleAddRuleInfo() {
				if (this.shopingRouleInfo.length == 2) return this.$message('最多可添加俩个规格');
				this.shopingRouleInfo.push({
					name: "",
					pic: "",
					arr: []
				});
			},
			handleAddRuleArr(index) {
				this.shopingRouleInfo[index].arr.push({
					name: "",
					pic: ""
				});
			},
			async getLeiMu() {
				this.menuOptions = [];
				let res = await listWcGoodsCategory({}, {
					pageNum: 1,
					pageSize: 99999,
				});
				const menu = {
					goodsCategoryId: '',
					goodsCategoryName: '主类目',
					children: []
				};
				this.listCategoryData = res.rows;
				menu.children = this.handleTree(res.rows, "goodsCategoryId", "goodsCategoryParentId");
				this.menuOptions.push(menu);
				return;
			},
			async getLeiMuType() {
				this.menuOptionsType = [];
				const menu = {
					goodsTypeId: '',
					goodsTypeName: '主分类',
					children: []
				};
				menu.children = this.handleTree(this.classificationData, "goodsTypeId", "modifyOperatorId");
				this.menuOptionsType.push(menu);
				return;
			},
			/** 转换菜单数据结构 */
			normalizer(node) {
				if (node.children && !node.children.length) {
					delete node.children;
				}
				return {
					id: node.goodsCategoryId,
					label: node.goodsCategoryName,
					children: node.children
				};
			},
			normalizerType(node) {
				if (node.children && !node.children.length) {
					delete node.children;
				}
				return {
					id: node.goodsTypeId,
					label: node.goodsTypeName,
					children: node.children
				};
			},
			resetFrom() {
				this.shopingRouleInfo = [];
				this.tableData = [];
				this.formInline = {
					goodsName: "",
					goodsPicAddress: "",
					goodsCategoryId: "",
					goodsVideoAddress: "",
					goodsTypeId: [],
					detailAddress: "",
					supplier: "",
					cooperationMethods: "",
					lastOnshowTime: "",
					deliveryMethod: "",
					deliveryType: "",
					postageRate: "",
					templateId: "",
					productIntroduction: "",
					wcGoodsParameterDtos: [],
					showlastOnshowTime: false,
					showDeliveryType: false,
				};
			},
			handleClose() {
				this.dialogVisible = false;
			},
			handleUpFileChange(file) {
				if (file.response) {
					if (file.response.code == 200) {
						this.fileName = file.name;
						this.formInline.goodsVideoAddress = file.response.fileName;
						this.$refs['edd-add-form'].validateField('goodsVideoAddress');
					} else {
						this.fileName = '文件上传失败，请重新上传。'
					}
					this.loadingScreen.close();
				} else {
					this.loadingScreen = this.$loading({
						lock: true,
						text: '上传文件中...',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					});
				}
			},
			handleSubmit() {
				this.$refs['edd-add-form'].validate(async valid => {
					try {
						let formInline = {
							...this.formInline,
							wcGoodsSpecificationList: this.tableData.map(item => {
								let data = JSON.parse(JSON.stringify(item));
								delete data.title1;
								delete data.title1Val;
								delete data.title2;
								delete data.title2Val;
								return data;
							}),
							wcGoodsSpecificationNameList: this.shopingRouleInfo.map(item => {
								return {
									specificationName: item.name,
									specificationValue: item.arr.map(item => item.name).toString(),
									specificationPic: item.pic
								}
							}),
							wcGoodsTypeContactDtoList: this.classificationData.reduce((pev,
								item) => { //多个分类
								if (item.goodsTypeId == this.formInline.goodsTypeId) {
									pev.push({
										goodsTypeId: item.goodsTypeId,
										goodsTypeName: item.goodsTypeName
									})
								}
								return pev
							}, [])
						};
						formInline.wcGoodsParameterDtos = formInline.wcGoodsParameterDtos.map(item => {
							let goodsParameterName = this.parameterData.reduce((pev, i) => {
								if (item.goodsParameterId == i.goodsParameterId) pev = i
									.goodsParameterName;
								return pev
							}, "");

							return {
								goodsParameterId: item.goodsParameterId,
								goodsParameterName,
								parameter: item.parameter
							}
						});

						formInline.goodsCategory = formInline.goodsCategoryId;
						delete formInline.showDeliveryType;
						delete formInline.showlastOnshowTime;
						if (valid) {
							let res;
							this.btnLoading = true;
							let msg = this.formInline.goodsId ? '更新成功' : '添加成功';
							if (!this.formInline.goodsId) {
								res = await addWcGoods(formInline);
							} else {
								res = await updataWcGoods(formInline);
							}
							this.$message.success(res.msg?res.msg:msg);
							this.btnLoading = false;
							this.dialogVisible = false;
							this.$emit("success");
						}
					} catch (e) {
						console.log("出错", e);
						this.btnLoading = false;
					}
				});
			},
			handleParameterDel(index) {
				this.formInline.wcGoodsParameterDtos = [...this.formInline.wcGoodsParameterDtos.slice(0, index), ...this
					.formInline.wcGoodsParameterDtos.slice(index +
						1, this.formInline.wcGoodsParameterDtos.length)
				];
			},
			handleRuleArrDel(index, _index) {
				let data = this.shopingRouleInfo[index].arr;
				this.shopingRouleInfo[index].arr = [...data.slice(0, _index), ...data.slice(_index +
					1, data.length)];
				this.saveTable();
			},
			handleRuleDel(index) { //删除规格信息
				this.shopingRouleInfo = [...this.shopingRouleInfo.slice(0, index), ...this.shopingRouleInfo.slice(index +
					1, this.shopingRouleInfo.length)];
				this.saveTable();
			},
			handleBlurRuleInfo() {
				this.saveTable();
			},
			handleBlurRuleArr() {
				this.saveTable();
			},
			saveTable(options) {
				let arr = [];
				let indexNumb = 0;
				if (!(this.shopingRouleInfo[0] && this.shopingRouleInfo[0].arr)) return;
				this.shopingRouleInfo[0].arr.forEach(item => {
					let obj = {
						mealCardPay: options ? options[indexNumb].mealCardPay : '',
						recommendation: options ? options[indexNumb].recommendation : '',
						platformSpecificationCode: options ? options[indexNumb]
							.platformSpecificationCode : '',
						productDescription: options ? options[indexNumb]
							.productDescription : '',
						platformItemCode: options ? options[indexNumb].platformItemCode : '',
						goodsAttribute: options ? options[indexNumb].goodsAttribute : ''
					};
					if (this.shopingRouleInfo[1] && this.shopingRouleInfo[1].arr.length) {
						this.shopingRouleInfo[1].arr.forEach(i => {
							arr.push({
								title1: this.shopingRouleInfo[0].name,
								title1Val: item.name,
								title2: this.shopingRouleInfo[1].name,
								title2Val: i.name,
								...obj
							});
							indexNumb = indexNumb + 1;
						});
					} else {
						arr.push({
							title1: this.shopingRouleInfo[0].name,
							title1Val: item.name,
							...obj
						});
						indexNumb = indexNumb + 1;
					};
				});
				this.tableData = arr;
				this.shopingRouleInfo = this.shopingRouleInfo.map(item => {
					if (this.formInline.goodsPicAddress) {
						if (!item.pic) item.pic = this.formInline.goodsPicAddress.split(",")[0];
					};
					return item;
				});
				// console.log('查看表格：',this.tableData)
				// console.log("shopingRouleInfo,查看内容：",this.shopingRouleInfo)
			},
			handleAddParameter() {
				this.formInline.wcGoodsParameterDtos.push({
					goodsParameterId: "",
					parameter: "",
					listData: []
				});
			},
			handleParameterOnce(index) {
				let goodsParameterId = this.formInline.wcGoodsParameterDtos[index].goodsParameterId;
				this.parameterData.forEach(item => {
					if (goodsParameterId == item.goodsParameterId) {
						this.formInline.wcGoodsParameterDtos[index].listData = item.parameter.split(",")
					}
				});
			},
			objectSpanMethod({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				let numb = 1;
				if (this.shopingRouleInfo[1]) {
					numb = this.shopingRouleInfo[1].arr.length;
				}
				if (columnIndex === 0) {
					if (rowIndex % numb === 0) {
						return {
							rowspan: numb,
							colspan: 1
						};
					} else {
						return {
							rowspan: 0,
							colspan: 0
						};
					}
				}
			}
		},
		created() {
			this.resetFrom();
		},
		computed: {
			uploadIurl() {
				return process.env.VUE_APP_BASE_API + "/common/upload";
			}
		}
	}
</script>
<style lang="scss" scoped>
	::v-deep .el-input__inner {
		text-align: left !important;
	}

	.width100 {
		width: 590px;
	}

	.cell-input {
		width: 200px;
	}

	.up-file-wrappar {
		display: flex;
		align-items: center;
	}

	.total-day {
		display: inline-block;
		height: 36px;
		width: 40px;
		margin: 0 6px;
		text-align: center;
		border-radius: 4px;
		border: 1px solid #DCDFE6;
		padding: 0 15px;
		box-sizing: border-box;
	}
</style>
